<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>
                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" />
            </h1>
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content class="limited-width">
    <core-loading [hideUntil]="feedbackLoaded" class="has-spacer">
        <ng-container *ngIf="items && items.length">
            <ion-list class="ion-no-margin has-spacer">
                <ion-item class="ion-text-wrap">
                    <ion-label>
                        <p class="item-heading">{{ 'addon.mod_feedback.mode' | translate }}</p>
                        <p *ngIf="access!.isanonymous">{{ 'addon.mod_feedback.anonymous' | translate }}</p>
                        <p *ngIf="!access!.isanonymous">{{ 'addon.mod_feedback.non_anonymous' | translate }}</p>
                    </ion-label>
                </ion-item>
                <ng-container *ngFor="let item of items">
                    <core-spacer *ngIf="item.typ === 'pagebreak'" />
                    <ng-container *ngIf="item.typ !== 'pagebreak'">
                        <ion-item class="ion-text-wrap addon-mod_feedback-item" [color]="item.dependitem > 0 ? 'light' : ''"
                            [class.core-danger-item]="item.isEmpty || item.hasError">
                            <ion-label *ngIf="!item.slottedLabel">
                                <ng-container *ngTemplateOutlet="label; context: {item: item}" />
                                <p *ngIf="item.templateName === 'label'">
                                    <core-format-text [component]="component" [componentId]="cmId" [text]="item.presentation"
                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
                                </p>
                            </ion-label>

                            <ion-input labelPlacement="stacked" *ngIf="item.templateName === 'textfield'" type="text"
                                [(ngModel)]="item.value" autocorrect="off" name="{{item.typ}}_{{item.id}}" maxlength="{{item.length}}"
                                [required]="item.required">
                                <ng-container *ngTemplateOutlet="label; context: {item: item}" />
                            </ion-input>

                            <ng-container *ngIf="item.templateName === 'numeric'">
                                <ion-input labelPlacement="stacked" type="number" [(ngModel)]="item.value" name="{{item.typ}}_{{item.id}}"
                                    [required]="item.required">
                                    <ng-container *ngTemplateOutlet="label; context: {item: item}" />
                                </ion-input>
                                <ion-text *ngIf="item.hasError" color="danger" class="addon-mod_feedback-item-error">
                                    {{ 'addon.mod_feedback.numberoutofrange' | translate }} [{{item.rangefrom}}
                                    <span *ngIf="item.rangefrom && item.rangeto">, </span>{{item.rangeto}}]
                                </ion-text>
                            </ng-container>

                            <ion-textarea labelPlacement="stacked" *ngIf="item.templateName === 'textarea'" [required]="item.required"
                                name="{{item.typ}}_{{item.id}}" [(ngModel)]="item.value">
                                <ng-container *ngTemplateOutlet="label; context: {item: item}" />
                            </ion-textarea>

                            <ion-select labelPlacement="stacked" *ngIf="item.templateName === 'multichoice-d'" [required]="item.required"
                                name="{{item.typ}}_{{item.id}}" [(ngModel)]="item.value" interface="action-sheet"
                                [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: item.name}">
                                <ng-container *ngTemplateOutlet="label; context: {item: item}" />
                                <ion-select-option *ngFor="let option of item.choices" [value]="option.value">
                                    <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
                                </ion-select-option>
                            </ion-select>
                        </ion-item>

                        <ion-radio-group *ngIf="item.templateName === 'multichoice-r'" [(ngModel)]="item.value" [required]="item.required"
                            name="{{item.typ}}_{{item.id}}">
                            <ion-item *ngFor="let option of item.choices" class="ion-text-wrap">
                                <ion-radio [value]="option.value">
                                    <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
                                </ion-radio>
                            </ion-item>
                        </ion-radio-group>

                        <ng-container *ngIf="item.templateName === 'multichoice-c'">
                            <ion-item *ngFor="let option of item.choices">
                                <ion-checkbox [required]="item.required" name="{{item.typ}}_{{item.id}}" [(ngModel)]="option.checked"
                                    value="option.value">
                                    <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
                                </ion-checkbox>
                            </ion-item>
                        </ng-container>

                        <ng-container *ngIf="item.templateName === 'captcha'">
                            <core-recaptcha *ngIf="!preview && !offline" [publicKey]="item.captcha.recaptchapublickey" [model]="item"
                                modelValueName="value" />
                            <div *ngIf="!preview && (!item.captcha || offline)" class="core-warning-card">
                                <ion-item>
                                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                                    <ion-label>{{ 'addon.mod_feedback.captchaofflinewarning' | translate }}</ion-label>
                                </ion-item>
                            </div>
                        </ng-container>
                    </ng-container>
                </ng-container>

                <ion-row class="ion-align-items-center spacer-top" *ngIf="!preview">
                    <ion-col *ngIf="hasPrevPage">
                        <ion-button expand="block" fill="outline" (click)="gotoPage(true)" class="ion-text-wrap">
                            <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true" />
                            {{ 'core.previous' | translate }}
                        </ion-button>
                    </ion-col>
                    <ion-col *ngIf="hasNextPage">
                        <ion-button expand="block" (click)="gotoPage(false)" class="ion-text-wrap">
                            {{ 'core.next' | translate }}
                            <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true" />
                        </ion-button>
                    </ion-col>
                    <ion-col *ngIf="!hasNextPage">
                        <ion-button expand="block" (click)="gotoPage(false)" class="ion-text-wrap">
                            {{ 'core.submit' | translate }}
                        </ion-button>
                    </ion-col>
                </ion-row>
            </ion-list>
        </ng-container>

        <ion-card class="core-success-card" *ngIf="completed">
            <ion-item class="ion-text-wrap">
                <ion-icon name="fas-check" slot="start" aria-hidden="true" />
                <ion-label>
                    <p *ngIf="!completionPageContents && !completedOffline">
                        {{ 'addon.mod_feedback.this_feedback_is_already_submitted' | translate }}
                    </p>
                    <p *ngIf="!completionPageContents && completedOffline">
                        {{ 'addon.mod_feedback.feedback_submitted_offline' | translate }}
                    </p>
                    <core-format-text *ngIf="completionPageContents" [component]="component" componentId="componentId"
                        [text]="completionPageContents" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" />
                </ion-label>
            </ion-item>
        </ion-card>

        <div collapsible-footer *ngIf="feedbackLoaded && completed" slot="fixed" appearOnBottom>
            <div class="list-item-limited-width adaptable-buttons-row">
                <ion-button expand="block" fill="outline" (click)="showAnalysis()" class="ion-text-wrap ion-margin"
                    *ngIf="access!.canviewanalysis">
                    <ion-icon name="fas-chart-bar" slot="start" aria-hidden="true" />
                    {{ 'addon.mod_feedback.completed_feedbacks' | translate }}
                </ion-button>
                <ion-button expand="block" (click)="continue()" class="ion-text-wrap ion-margin">
                    <ng-container *ngIf="!siteAfterSubmit">{{ 'core.continue' | translate }}</ng-container>
                    <ng-container *ngIf="siteAfterSubmit">{{ 'core.course.nextactivity' | translate }}</ng-container>
                </ion-button>
            </div>
        </div>
    </core-loading>
</ion-content>


<ng-template #label let-item="item">
    <p class="ion-text-wrap" *ngIf="item.name" [core-mark-required]="item.required" [attr.slot]="item.slottedLabel ? 'label' : undefined">
        <span *ngIf="feedback!.autonumbering && item.itemnumber">{{item.itemnumber}}. </span>
        <core-format-text [component]="component" [componentId]="cmId" [text]="item.name" contextLevel="module" [contextInstanceId]="cmId"
            [courseId]="courseId" [wsNotFiltered]="true" />
        <span *ngIf="item.postfix" class="addon-mod_feedback-postfix">{{item.postfix}}</span>
    </p>
</ng-template>
